<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Top-Bottom & Right-Left Style Text Editor</title>
<style>
    html, body{
        margin: 0;
        padding: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: auto;
    }

    pre, ul, input,select{
        margin: 0;
        padding: 0;
    }
    input,select{
        background-color: transparent;
        border: none;
        outline: none;
    }
    a{
        color:black;
    }
    label, .label{
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    html{
        font-size: 4vh;
    }
    body{
        margin: 0 auto;
        min-width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }

    #tabs{
        width: 100%;
        min-height: 2.1rem;
        max-height: 2.1rem;
        line-height: 2.1rem;
        background-color: #3f3f3f;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: stretch;
        font-size: 1rem;
        user-select: none;
    }
    #tabs ux-tab{
        flex-grow: 1;
        min-width: 3rem;
        color: #aaaaaa;
        text-align: center;
        cursor: pointer;
    }
    #tabs ux-tab:hover, #tabs ux-tab.cur{
        background-color: #555555;
    }
    #tabs ux-tab-split{
        height: 100%;
        width: 2px;
        background-color: #505050;
    }
    #tabs ux-tab.left{
        max-width: 1.2rem;
    }

    #box{
        width: 100%;
        flex: 1;
        background-color: #555555;
    }
    #box ux-box{
        display: none;
        width: 100%;
        height: 100%;
    }

    #box-edit, #box-edit-area {
        width: 100%;
        height: 100%;
    }
    #box-edit-area{
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        overflow: hidden;
    }
    #box-edit-area #tools {
        width: 100%;
        height: 10%;
        min-height: 0.5rem;
        background-color:#666666;
        color: #aaaaaa;
        text-align: center;
        writing-mode: vertical-rl;
        text-orientation: upright;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        overflow: hidden;
    }
    .edit-tool {
        font-size: 0.5rem;
        width: 0.5rem;
        height: 100%;
        cursor: pointer;
        user-select: none;
    }
    .edit-tool:hover {
        background-color: #888888;
        color: #dddddd;
        font-weight: bold;
    }
    #box-edit-area #words {
        width: 100%;
        height: 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        overflow: hidden;
        flex: 1;
        writing-mode: vertical-rl;
        text-orientation: upright;
        overflow-x: scroll;
    }
    .word {
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        background-color: #aaaaaa;
        font-size: 0.8rem;
        text-align: center;
        flex: 0;
        user-select: text;
        white-space: pre;
    }

    #_ime_in {
        width: 100%;
        height: 1rem;
        background-color: #404040;
        color: 404040;
    }

    ux-template {
        display: none;
    }
</style>
</head>
<body>
<div id="tabs">
    <ux-tab class="left" ux-value="#box-library">▤库</ux-tab>
    <ux-tab-split></ux-tab-split>
    <ux-tab ux-value="#box-edit">编辑</ux-tab>
    <ux-tab-split></ux-tab-split>
    <ux-tab ux-value="#box-conf">设定</ux-tab>
</div>
<div id="box">
    <ux-box id="box-library">Library</ux-box>
    <ux-box id="box-edit">
        <div id = "box-edit-area">
            <div id="tools">
                <div class="edit-tool">A</div>
                <div class="edit-tool">B</div>
                <div class="edit-tool">C</div>
            </div>
            <div id="words"></div>
        </div>
    </ux-box>
    <ux-box id="box-conf">Conf
    </ux-box>
</div>
<input id="_ime_in" type="text" />
<ux-template id="word">
    <div class="word">{WORD}</div>
</ux-template>
</body>
<script>document.write(((a,b)=>(`${a}t type="module" src="./main.js?fuck=${Date.now()}">${b}t>`))("<scrip","</scrip"))</script>
</html>
